
<template>
	<view>
		<view class="repair-bg">
		</view>
		<view class="repair-buttom-box" @click="toOrderList()">
			<button class="repair-bt" id="repair-bt1" >
				<view class="repair-btname" hover-class="repair-bt1_hover">
					<text>新工单</text>
				</view>
				<view class="repair-btnum">
					<text>{{order_new_Array.length}}</text>
				</view>
			</button>
			<button class="repair-bt" id="repair-bt2">
				<view class="repair-btname" hover-class="repair-bt2_hover">
					<text>未处理</text>
				</view>
				<view class="repair-btnum">
					<text>15</text>
				</view>
			</button>
			<button class="repair-bt" id="repair-bt3" hover-class="repair-bt3_hover">
				<view class="repair-btname">
					<text>历史处理</text>
				</view>
				<view class="repair-btnum">
					<text>15</text>
				</view>
			</button>
		</view>
		<view class="repair-new-title-box">
			<text id="the-newest-order" selectable="true">
				最新工单
			</text>
		</view>
		<view class="repair-content-box">
			<scroll-view scroll-y="true" class="order-new-bottom">
				<!-- 一个整个工单列表模块 -->
				<view class="order-new-Info-List" v-for="(item,index) in order_new_Array" :key="item.id">
					<view class="order-new-Info-view" hover-class="order-new-Info-view_hover">
						<view class="order-new-Info-left">
							<img src="http://p1362.bvimg.com/10465/8a6b2e0e4858e24a.png" />
							<!-- <text>{{index + 1}}</text> -->
						</view>
						<view class="order-new-Info-middle">
							<view class="order-new-Info-line1">
								<view class="order-new-Info-title">
									<!-- 收到的工单 -->
									{{item.title}}
								</view>
								<view class="order-new-Info-state">
									{{item.state}}
								</view>
							</view>
							<view class="order-new-Info-line2">
								<view class="order-new-Info-DateTime">
									{{item.date+' '+item.time}}<!-- 日期时间 -->
								</view>
								<view class="order-new-Info-when">
									{{item.when}}<!-- 多久之前 -->
								</view>
							</view>
							<view class="order-new-Info-line3">
								<view class="order-new-Info-Brief">
									<text>{{item.brief}}</text><!-- 问题简述 -->
								</view>
							</view>
							<view class="order-new-Info-line4">
								<view class="order-new-Info-User">
									报修人: {{item.user}}<!-- 报修人 -->
								</view>
								<view class="order-new-Info-Place">
									地点：{{item.place}}<!-- 地点 -->
								</view>
							</view>
						</view>
					</view>
					<view class="cross-line"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_new_Array: [{
					id: 0,
					title: "收到的工单",
					state: "待出工",
					date: "2021/12/2",
					time: "10:26",
					when: "30分钟前",
					brief: "网线接口故障",
					user: "张三",
					place: "华润超市"
				}, {
					id: 1,
					title: "收到的工单",
					state: "待出工",
					date: "2021/12/1",
					time: "10:00",
					when: "1天前",
					brief: "下水道堵塞",
					user: "李四",
					place: "长青小学"
				}, {
					id: 2,
					title: "收到的工单",
					state: "待出工",
					date: "2021/12/1",
					time: "13:00",
					when: "1天前",
					brief: "断电",
					user: "王五",
					place: "沙县小吃"
				}, {
					id: 3,
					title: "收到的工单",
					state: "待出工",
					date: "2021/12/1",
					time: "18:00",
					when: "1天前",
					brief: "下水道堵塞",
					user: "王铁柱",
					place: "莲花公寓"
				}, {
					id: 4,
					title: "收到的工单",
					state: "待出工",
					date: "2021/11/29",
					time: "10:00",
					when: "3天前",
					brief: "水管堵塞",
					user: "田二妞",
					place: "莲花公寓"
				}]
			}
		},
		methods: {
			toOrderList() {
				uni.navigateTo({
					url: '../repairsWorker_taskList/repairsWorker_taskList'
				})
			}
		}
	}
	
</script>

<style lang="scss">
	@import '@/common/iconfont.css';

	.repair-bg {
		background-image: url('http://p1362.bvimg.com/10465/d0bfce356f8a76ce.png');
		background-size: 100% 100%;
		width: 100%;
		height: 43vw;
	}

	.repair-buttom-box {
		/* margin-top: -5vw; */
		display: flex;
		margin-top: -8vw;
	}

	.repair-bt {
		width: 27vw;
		height: 16vw;
		color: #FFFFFF;
		font-size: small;
	}

	.repair-bt1_hover {
		background-color: #d7a052;
	}

	.repair-bt2_hover {
		background-color: #7c9d5f;
	}

	.repair-bt3_hover {
		background-color: #a77b63;
	}

	.repair-bt-view {
		display: flex;
	}

	.repair-bt::after {
		border: none;
	}

	.repair-btname {
		font-size: medium;
		font-weight: bold;
		height: 40%;
	}

	.repair-btnum {
		font-size: medium;
		font-weight: bold;
	}

	.order-new-Info-view {
		width: 100%;
		height: 25vw;
		display: flex;
		margin-top: 3vw;
		background-color: #fefaf3;

	}

	.order-new-Info-view_hover {
		background-color: #FEF0D2;
	}

	.order-new-bottom {}

	.repair-content-box {
		height: 100vw;
		background-size: 100% 100%;
		margin-left: 3vw;
		margin-right: 3vw;
		margin-top: 3vw;

	}

	.repair-new-title-box {
		margin-top: 5vw;
		margin-left: 5vw;
		margin-right: 5vw;
	}

	.cross-line {
		height: 0.5vw;
		width: 100%;
		background-color: #f0d6ab;
	}

	// 工单图标
	.order-new-Info-left {
		width: 13%;
		align-items: center;
	}

	.order-new-Info-left img {
		height: 9.5vw;
		width: 9.5vw;
	}

	.order-new-Info-middle {
		width: 100%;
	}

	.order-new-Info-line1 {
		display: flex;
		height: 5.5vw;
		width: 100%;
	}

	.order-new-Info-title {
		width: 100%;
		font-weight: bold;
		color: #575757;
	}

	.order-new-Info-state {
		width: 23%;
		font-size: medium;
		font-weight: bold;
		color: #FEBD62;
		text-align: right;
	}

	.order-new-Info-line2 {
		display: flex;
		height: 4vw;
		width: 100%;
		margin-top: -0.5vw;
		margin-bottom: 1vw;
	}

	.order-new-Info-DateTime {
		width: 100%;
		font-size: small;
		color: #808080;
	}

	.order-new-Info-when {
		width: 45%;
		font-size: small;
		color: #808080;
		text-align: right;
	}

	.order-new-Info-line3 {
		height: 8vw;
		font-size: larger;
		font-weight: bold;
		color: #575757;
		align-items: center;
	}

	.order-new-Info-line4 {
		display: flex;
		height: 5.5vw;
		width: 100%;
	}

	.order-new-Info-User {
		width: 100%;
		color: #808080;
		font-size: small;
		font-weight: bold;
	}

	.order-new-Info-Place {
		width: 100%;
		color: #808080;
		font-size: small;
		font-weight: bold;
	}

	#repair-bt1 {
		background-color: #FEBD62;
	}

	#repair-bt2 {
		background-color: #B1E288;
	}

	#repair-bt3 {
		background-color: #F7B792;
	}

	#the-newest-order {
		font-size: large;
		font-weight: bold;
		color: #d29c51;
	}
</style>
